<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 0;
      margin: 0;
    }
    .box {
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .header {
      padding: 12px;
      text-align: center;
    }
    .content {
      height: 500px;
      background-color: #f6f6f6;
      padding: 2%;
      flex: 1;
    }
    .content .item {
      margin-bottom: 10px;
    }
    .content .item .msg {
      max-width: 80%;
      background-color: #ffffff;
      padding: 10px;
      border-radius: 5px;
      display: inline-block;
      text-align: left;
      margin-top: 2px;
    }
    .content .mymsg {
      text-align: right;
    }
    .footer {
      background-color: #ffffff;
      padding: 10px;
      display: flex;
    }
    .footer input {
      flex: 1;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .footer button {
      width: 18%;
      padding: 10px;
      border: none;
      border-radius: 50px;
      background-image: linear-gradient(-90deg, #a18cd1 0%, #fbc2eb 100%);
      color: #ffffff;
      margin-left: 2%;
    }
  </style>
  <body>
    <div id="app">
      <div class="box">
        <!-- 头部 -->
        <div class="header">前端交流群({{state.userCount}})</div>
        <!-- 内容 -->
        <div class="content">
          <div v-for="item in state.msgList" :key="item.id">
            <div class="item mymsg" v-if="item.id === state.user.id">
              <div style="color: blue">{{ item.name }}</div>
              <div class="msg">{{ item.msg }}</div>
            </div>
            <div class="item" v-else>
              <div style="color: red">{{ item.name }}</div>
              <div class="msg">{{ item.msg }}</div>
            </div>
          </div>
        </div>

        <!-- 底部输入框和发送按钮 -->
        <div class="footer">
          <input type="text" placeholder="请输入内容" v-model="state.msg" />
          <button @click="sendMsg">发送</button>
        </div>
      </div>
    </div>
  </body>
  <script src="./vue.global.min.js"></script>
  <script>
    const { createApp, ref, reactive } = Vue;
    createApp({
      setup() {
        const state = reactive({
          msg: "",
          msgList: [
            {
              id: 2,
              name: "张三",
              msg: "你好，我是张三",
            },
            {
              id: 1,
              name: "李四",
              msg: `你好，我是李四你好，我是李四你好，我是李四你好，我是李四
              你好，我是李四你好，我是李四你好，我是李四你好，我是李四
              你好，我是李四你好，我是李四你好，我是李四你好，我是李四
              你好，我是李四你好，我是李四你好，我是李四你好，我是李四
              你好，我是李四你好，我是李四你好，我是李四你好，我是李四`,
            },
          ],
          userCount: 2,
          user: {
            id: 1,
            name: "李華",
          },
        });

        function sendMsg() {
          state.msgList.push({
            id: state.user.id,
            name: state.user.name,
            msg: state.msg,
          });
          state.msg = "";
        }

        return {
          state,
          sendMsg,
        };
      },
    }).mount("#app");
  </script>
</html>
